<template>
	<view>
		<drawer ref="drawer" :show="show" @close="show = false" :show-cancle="showCancle" :cancel-text="cancleText"
			:confirm-text="confirmText" @cancel="cancel" :cancelEvent="false" :confirmEvent="false" @confirm="confirm"
			:title="'请确认是否误报'">
			<view class="confim-content">

				<view class="info-item" v-if="detail.deviceId">
					<view class="info-item-label">
						视频确认<text>*</text>
					</view>
					<view class="info-item-content tag-group">
						<view class="tag x2 active" @click="goLive('index')">
							<image src="@/static/images/converse.png"></image>
							视频通话
							<uni-icons color="#0091FF" size="16" type="arrowright" />
						</view>
						<view class="tag x2 active" @click="goLive('video')">
							<image src="@/static/images/monitor.png"></image>
							实时视频
							<uni-icons color="#0091FF" size="16" type="arrowright" />
						</view>
					</view>
				</view>

				<view class="info-item" v-else>
					<view class="info-item-label">
						电话确认<text>*</text>
					</view>
					<view class="info-item-content phone-call" @click="callPhoneNumber(detail.estateLinkman[0].phone)"
						v-if="detail.estateLinkman && detail.estateLinkman.length">
						<image class="" src="@/static/images/callPhone.png"></image>
						{{ detail.estateLinkman[0].userName }}({{ detail.estateLinkman[0].phone }})
					</view>
					<view class="info-item-content" v-else>
						-
					</view>
				</view>

				<view class="info-item">
					<view class="info-item-label">
						确认结果<text>*</text>
					</view>
					<view class="info-item-content tag-group">
						<view class="tag" :class="{ active: result == 1 }" @click="setResult(1)">
							准确无误
						</view>
						<view class="tag" :class="{ active: result == 2 }" @click="setResult(2)">
							误报
						</view>
						<view class="tag" :class="{ active: result == 3 }" @click="setResult(3)">
							无法确定
						</view>

					</view>
				</view>

				<view class="info-item" style="display: flex;align-items: center;" v-if="result && result !==2 && rescusHis.length != 0">
					<view class="info-item-label" style="margin: 0;">
						救援中工单数<text>*</text>
					</view>
					<view class="info-item-label" style="margin: 0;margin-left: 20rpx;">{{ rescusHis.length  }}</view>
					<view style="color: #0091FF;margin-left: auto;" @click="showHis">查看详情</view>
				</view>

				<view class="info-item">
					<view class="info-item-label">
						补充说明
					</view>
					<view class="info-item-content">
						<view class="area">
							<textarea v-model="remark" placeholder="请输入备注内容" placeholder-class="textare" maxlength="300"
								:always-embed="true" />
							<view class="length">{{ remark.length + '/300' }}</view>
						</view>
					</view>
				</view>

			</view>
		</drawer>
		<historyDrawer :showCancle="false" ref="historyDrawer" @confirm="hisConfirm" @cancel="hisCancel"></historyDrawer>
	</view>

</template>
<script>
import { confirmNoticeResult, getRescueHis } from '@/apis/rescue.js';
import historyDrawer from './history-drawer.vue';
import drawer from '@/components/filter-drawer/drawer.vue';
import { mapState, mapActions } from 'vuex';
export default {
	components: { drawer, historyDrawer },
	props: {

	},
	data() {
		return {
			detail: {},
			result: '',
			options: [],
			remark: '',
			showCancle: false,
			cancleText: '',
			confirmText: '请确认结果',
			rescusHis: [],
			show: false,
		};
	},
	computed: {
		...mapState('user', ['userinfo']),
	},
	methods: {
		goLive(path) {
			uni.setStorage({
				key: 'videoCall',
				data: {
					deviceId: this.detail.deviceId,
					elevatorId: this.detail.elevatorId,
					projectName: this.detail.buildingName,
					elevatorAddress: this.detail.elevatorAddress,
					serviceName: this.userinfo.nick_name || '维保员',
				}, success: () => {
					uni.navigateTo({
						url: '/pages/live/live?pagePath=' + path
					});
				}
			});
		},
		// 获取该电梯救援中的工单
		getElevatorOrders(buildingId, elevatorId) {
			getRescueHis({
				buildingId,
				elevatorId
			}).then(res => {
				this.rescusHis = res.data || [];
			});
		},

		// 查看救援工单列表
		showHis() {
			this.$refs.historyDrawer.open(this.rescusHis);
		},
		callPhoneNumber(phone, name) {
			if (phone) {
				uni.showModal({
					title: name ? ('呼叫' + name) : '拨打电话',
					content: phone,
					success: (res) => {
						if (res.confirm) {
							uni.makePhoneCall({
								phoneNumber: phone
							});
						}
					},
				});
			} else {
				uni.showToast({
					title: '无效的电话号码',
					icon: 'none'
				});
			}
		},

		open(detail = {}) {
			this.detail = detail;
			// this.remark = '';
			this.result = '';
			this.showCancle = false;
			this.cancleText = '';
			this.confirmText = '请确认结果';
			this.show = true;
			this.rescusHis = [];
			if (this.detail.elevatorId && this.detail.buildingId) {
				this.getElevatorOrders(this.detail.buildingId, this.detail.elevatorId);
			}
		},

		setResult(result) {
			this.result = result;
			switch (result) {
			case 1:
				this.showCancle = true;
				this.cancleText = '已脱困创建维修单';
				this.confirmText = this.rescusHis.length ?  '提交结果' : '创建救援单并调度';
				break;
			case 2:
				this.showCancle = false;
				this.confirmText = '提交误报';
				break;
			case 3:
				this.showCancle = false;
				this.confirmText = this.rescusHis.length ?  '提交结果' : '创建救援单并调度';
				break;
			}
		},
		confirm() {
			if (!this.result) {
				uni.showToast({
					title: '请选择结果',
					icon: 'none'
				});
				return;
			}

			let operation = (this.result == 2 ? 3 : 1);

			if ([1,3].includes(this.result)  && this.rescusHis.length) {
				confirmNoticeResult({
					id: this.detail.id,
					confirmType: this.result,
					remark: this.remark,
				}).then(()=>{
					uni.showToast({
						title: '提交成功',
						duration: 3000,
						icon: 'none'
					});
					this.show = false;
					this.$emit('success', {
						id: this.detail.id,
						operation: operation,
						confirmType: this.result
					});
				})
				return;
			}
			if (this.result == 2) {
				uni.showModal({
					title: '温馨提示',
					confirmColor: '#0091FF',
					confirmText: '确定提交',
					content: '请务必确认电梯是否真实困人后，再提交误报，否则容易导致救援事故，请谨慎操作!',
					success: (res) => {
						if (res.confirm) {
							this.postResult(operation);
						}
					},
					fail: (fail) => {
						console.log(fail);
					},
				});
			} else {
				this.postResult(operation);
			}
		},

		// 救援历史继续创建工单
		hisConfirm() {
			// this.postResult(1);
		},
		hisCancel() {
			// this.postResult(3);
		},

		postResult(operation) {
			uni.showLoading({
				title: '提交中',
				mask: true,
			});
			const ifSendMyself = this.findRoute('user_dispatch') ? false : true;
			confirmNoticeResult({
				id: this.detail.id,
				confirmType: this.result,
				operation: operation,
				remark: this.remark,
				ifSendMyself: operation == 1 ? ifSendMyself : false

			}).then(res => {
				if (operation == 1) {
					if (res.data) {
						uni.hideLoading();
						this.show = false;
						this.$emit('success', {
							id: this.detail.id,
							operation: operation,
							confirmType: this.result
						});
						const planId = res.data;
						if (ifSendMyself) {
							console.log('无调度权限-派给自己', planId);
							uni.redirectTo({
								url: `/subpages/rescue/rescueDetail?planId=${planId
								}&elevatorId=${this.detail.elevatorId > 0 ? this.detail.elevatorId : ''
								}`,
							});
						} else {
							uni.navigateTo({
								url: '/subpages/rescue/memberSelect?planId=' + res.data
									+ '&buildingId=' + this.detail.buildingId
									+ '&elevatorId=' + (this.detail.elevatorId || '')
									+ '&buildingName=' + this.detail.buildingName
									+ '&address=' + (this.detail.elevatorAddress || '未知位置')
							});
						}
					} else {
						uni.showToast({
							title: '救援单创建失败',
							icon: 'none'
						});
					}
				} else {
					uni.hideLoading();
					this.show = false;
					this.$emit('success', {
						id: this.detail.id,
						operation: operation,
						confirmType: this.result
					});
				}
			}).catch((err) => { 
				uni.hideLoading();
				if (err.code == 400) {
					this.show = false;
					setTimeout(()=>{
						this.$emit('success', {
							id: this.detail.id,
							operation: operation,
							confirmType: this.result
						});
					},400);
				}
			});
		},

		cancel() {
			// this.postResult(2);
			uni.navigateTo({
				url: '/pageModules/barrierSearch/searchBg?type=0&rescueNoticeId=' + this.detail.id,
			});
			this.show = false;
		}
	}
};

</script>
<style lang="scss" scoped>
.confim-content {
	padding: 0 30rpx;

	.info-item {
		color: #333;
		padding: 15rpx 0;

		&-label {
			font-size: 30rpx;
			font-weight: bold;
			margin-bottom: 16rpx;

			text {
				color: #E02020;
				font-weight: normal;
			}

		}

		.area {
			padding: 20rpx;
			border: 2rpx solid #e9e9e9;

			textarea {
				font-size: 28rpx;
				height: 110rpx;
				width: 100%;
			}

			.length {
				text-align: right;
				// padding-bottom: 20rpx;
				color: #ccc;
			}
		}
	}
}

.tag-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}

.tag {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc((100% - 40rpx) / 3); // 3个一行，间隔20rpx
	height: 48rpx;

	margin: 0 20rpx 20rpx 0;
	border: 2rpx solid #ccc;
	border-radius: 8rpx;
	color: #666;
	background: #fff;
	font-size: 28rpx;
	transition: all 0.2s;
	padding-bottom: 2rpx;
}

.x2 {
	width: calc((100% - 20rpx) / 2); // 3个一行，间隔20rpx
	display: flex;
	align-items: center;

	image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 4rpx;
		padding-top: 2rpx;
	}
}

.x2:last-child {
	margin-right: 0;
}

.phone-call {
	display: flex;
	align-items: center;
	color: #0091FF;

	image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 4rpx;
		padding-top: 3rpx;
	}
}

// 最后一行最后一个不右边距
.tag:nth-child(3n) {
	margin-right: 0;
}

.tag.active {
	border-color: #0091FF;
	color: #0091FF;
	// background: #e6f7ff;
}

.label-margin-fix {
	margin-bottom: 2rpx !important;
	padding-top: 16rpx;
}

.textare {
	color: #ccc;
}
</style>